<template>
    <div class="app-container">
        <el-input
            v-model="roleName"
            placeholder="角色名称"
            style="width: 200px"
            class="filter-item"
        />
        <el-button
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="handleFilter"
        >
        </el-button>
        <el-button
            class="filter-item"
            style="margin-left: 10px"
            type="primary"
            icon="el-icon-edit"
            @click="dialogAddVisible = true"
        >
            新增角色
        </el-button>
        <el-button
            class="filter-item"
            style="margin-left: 10px"
            type="danger"
            icon="el-icon-edit"
            @click="deleteRoleBatch()"
        >
            批量删除
        </el-button>
        <el-table
            v-loading="listLoading"
            :data="list"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="id">
                <template slot-scope="scope">
                    {{ scope.row.id }}
                </template>
            </el-table-column>
            <el-table-column label="角色名称" width="110" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column label="角色描述" width="110" align="center">
                <template slot-scope="scope">
                    {{ scope.row.remark }}
                </template>
            </el-table-column>
            <el-table-column
                label="可用状态"
                width="110"
                align="center"
                :formatter="formatStatus"
            >
            </el-table-column>
            <el-table-column label="创建时间" width="110" align="center">
                <template slot-scope="scope">
                    {{ scope.row.createTime }}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)"
                        >编辑</el-button
                    >
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
            <!-- <el-table-column class-name="status-col" label="Status" width="110" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column> -->
            <!-- <el-table-column align="center" prop="created_at" label="Display_time" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.display_time }}</span>
        </template>
      </el-table-column> -->
        </el-table>
        <div class="block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-sizes="[5, 10, 20, 50]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next"
                :total="total"
            >
            </el-pagination>
        </div>

        <el-dialog title="新增角色" :visible.sync="dialogAddVisible">
            <el-form :model="form">
                <el-form-item label="角色名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input v-model="form.remark" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="启用" :label-width="formLabelWidth">
                    <el-radio v-model="form.status" :label="1">是</el-radio>
                    <el-radio v-model="form.status" :label="0">否</el-radio>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogAddVisible = false">取 消</el-button>
                <el-button type="primary" @click="add()">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="更新角色" :visible.sync="dialogUpdateFormVisible">
            <el-form :model="form">
                <el-form-item label="角色名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input v-model="form.remark" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="启用" :label-width="formLabelWidth">
                    <el-radio v-model="form.status" :label="1">是</el-radio>
                    <el-radio v-model="form.status" :label="0">否</el-radio>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogUpdateFormVisible = false"
                    >取 消</el-button
                >
                <el-button type="primary" @click="update()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>


<script>

import { pageInfo, delteBatch, roleAdd, roleDelete, roleInfo, roleUpdate } from "@/api/sms/role";

export default {
    filters: {
        statusFilter(status) {
            const statusMap = {
                published: "success",
                draft: "gray",
                deleted: "danger",
            };
            return statusMap[status];
        },
    },
    data() {
        return {
            list: null,
            listLoading: true,
            formLabelWidth: "120px",
            dialogUpdateFormVisible: false,
            dialogAddVisible: false,
            dialogVisible: false,
            form: {
                name: "",
                remark: "",
                status: 1,
            },
            currentPage: 1,
            pageSize: 5,
            total: 10,
            roleName: "",
            ids:[]
        };
    },
    created() {
        this.loadData();
    },
    methods: {
        formatStatus(row, column) {
            return row.status == 1 ? "是" : row.status == 0 ? "否" : "未作备注";
        },
        handleFilter() {
            this.loadData();
        },
        handleSelectionChange(val) {
            
            this.ids = [];
            // val = [{},{}]
            // console.log(val);
            for(var i = 0; i < val.length; i++) {
                this.ids[i] = val[i].id
            }
            console.log(this.ids);
        },
        deleteRoleBatch() {
            this.openDelConfirm("多条记录").then(() => {
                // data: [1, 2, 3 ]
                delteBatch(this.ids).then((res)=>{
                    if(res.code == 200) {
                        this.loadData();
                    }
                })
            });
            
        },
        loadData() {
            this.listLoading = true;
            pageInfo({
                pageNum: this.currentPage,
                pageSize: this.pageSize,
                roleName: this.roleName,
            }).then((response) => {
                this.list = response.data.dataList;
                this.total = response.data.total;
                this.listLoading = false;
            });
        },
        add() {
            roleAdd(this.form).then((response) => {
                this.dialogAddVisible = false;
                this.loadData();
            });
        },
        update() {
            roleUpdate(this.form).then((response) => {
                this.dialogUpdateFormVisible = false;
                this.loadData();
            });
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.loadData();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
            this.loadData();
        },
        handleEdit(index, row) {
            roleInfo(row.id).then((response) => {
                this.form = response.data;
                this.dialogUpdateFormVisible = true;
            });
        },
        openDelConfirm(name) {
            return this.$confirm(`此操作将删除 ${name}, 是否继续?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            });
        },

        handleDelete(index, row) {
            this.openDelConfirm(row.name).then(() => {
                roleDelete(row.id).then((response) => {
                    this.loadData();
                });
            });
        },
    },
};
</script>